<template lang="html">
  <div class="page-scroll-view">
    <div class="eg-search" data-flex="center">
      <div class="eg-search-inner">
        <input type="text" v-model="query" class="eg-search-ipt" placeholder="请输入页面名称">
        <div class="mt10 c-9">共有 {{ searchResult.length }} 个页面</div>
      </div>
    </div>
    <transition-group
      name="staggered-fade"
      tag="ul"
      v-bind:css="false"
      v-on:before-enter="onBeforeEnter"
      v-on:enter="onEnter"
      v-on:leave="onLeave"
      >
      <li v-for="(item, index) in searchResult" class="eg-page-link" v-bind:data-index="index" :key="item.path">
        <router-link :to="item.path"  class="eg-page-link-a">{{item.name}}</router-link>
      </li>
    </transition-group>
  </div>
</template>

<script>
import Velocity from 'velocity-animate'

export default {
  name: 'page-list',
  data () {
    return {
      query: '',
      pages: [
        { path: 'welcome', en: 'sy', name: '首页' },
        { path: 'login', en: 'dl', name: '登录' },
        { path: 'regist', en: 'zc', name: '注册' },
        { path: 'meal', en: 'tjyy', name: '体检预约' },
        { path: 'findpwd/step1', en: 'zhmm', name: '找回密码' },
        { path: 'center', en: 'grzx', name: '个人中心' },
        { path: '404', en: '404', name: '404页面' },
        { path: 'demos', en: 'zjk', name: '组件库' },
      ]
    }
  },
  computed: {
    searchResult () {
      var vm = this
      if (!vm.query.trim()) return vm.pages

      var res = vm.pages.filter(item => {
        return item.en.indexOf(vm.query.toLowerCase()) !== -1 || item.name.indexOf(vm.query) !== -1
      })
      return res
    }
  },
  methods: {
    onBeforeEnter (el) {
      el.style.opacity = 0
      el.style.height = 0
    },
    onEnter (el, done) {
      var delay = el.dataset.index * 150

      setTimeout(() => {
        Velocity(
          el,
          { opacity: 1, height: '2.5em' },
          { complete: done },
        )
      }, delay)
    },
    onLeave (el, done) {
      var delay = el.dataset.index * 150

      setTimeout(() => {
        Velocity(
          el,
          { opacity: 0, height: 0 },
          { complete: done },
        )
      }, delay)
    },
  }
}
</script>

<style lang="less">
.eg-search {
  height: 180px;
  background: #F1F0F0;
  &-inner{
    width: 80%;
  }
  &-ipt{
    width: 100%;
    height: 80px;
    border-radius: 4px;
    border:0;
    font-size: 30px;
    padding: 10px 20px;
  }
}
.eg-page-link {
  font-size: 32px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  &-a{
    color:#333;
    &:hover,&:active{
      color:#45AAFF;
    }
  }
}
</style>
